<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Star Admin2 </title>

  <!-- plugins:css -->
  <link rel="stylesheet" href="../assets/vendors/feather/feather.css">
  <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="../assets/vendors/ti-icons/css/themify-icons.css">
  <link rel="stylesheet" href="../assets/vendors/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../assets/vendors/typicons/typicons.css">
  <link rel="stylesheet" href="../assets/vendors/simple-line-icons/css/simple-line-icons.css">
  <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
  <link rel="stylesheet" href="../assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
  <!-- endinject -->
  <!-- Plugin css for this page -->
  <!-- End plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" href="../assets/css/style.css">
  <!-- endinject -->
  <link rel="shortcut icon" href="../assets/images/favicon.png" />

</head>
<body>
<div class="container-scroller">
  <!-- partial:../../partials/_navbar.html -->
  <nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex align-items-top flex-row">
    <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start">
      <div class="me-3">
        <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-bs-toggle="minimize">
          <span class="icon-menu"></span>
        </button>
      </div>
      <div>
        <a class="navbar-brand brand-logo" href="dashboard.php">
          <img src="../assets/images/logo.svg" alt="logo" />
        </a>
        <a class="navbar-brand brand-logo-mini" href="dashboard.php">
          <img src="../assets/images/logo-mini.svg" alt="logo" />
        </a>
      </div>
    </div>
    <div class="navbar-menu-wrapper d-flex align-items-top">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item d-none d-lg-block">
          <div id="datepicker-popup" class="input-group date datepicker navbar-date-picker">
                <span class="input-group-addon input-group-prepend border-right">
                  <span class="icon-calendar input-group-text calendar-icon"></span>
                </span>
            <input type="text" class="form-control">
          </div>
        </li>
        <li class="nav-item dropdown d-none d-lg-block user-dropdown">
          <a class="nav-link" id="UserDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="menu-icon fa fa-user-o"></i> </a>
          <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="UserDropdown">
            <div class="dropdown-header text-center">
                <?php include '../myprofile.php'; ?> <!-- 引入用户信息处理逻辑 -->
                <?php if (isset($userInfo)) {
                    if ($userInfo): ?>
                        <p class="mb-1 mt-3 fw-semibold"><?php echo $userInfo['uname']; ?></p>
                        <p class="fw-light text-muted mb-0"><?php echo $userInfo['email']; ?></p>
                    <?php endif;
                } ?>
            </div>
            <a class="dropdown-item" href="myprofile-page.php"><i class="dropdown-item-icon mdi mdi-account-outline text-primary me-2"></i> 我的资料</a>
            <a class="dropdown-item" href="../logout.php"><i class="dropdown-item-icon mdi mdi-power text-primary me-2"></i>注销</a>
          </div>
        </li>
      </ul>
      <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-bs-toggle="offcanvas">
        <span class="mdi mdi-menu"></span>
      </button>
    </div>
  </nav>
  <!-- partial -->
  <div class="container-fluid page-body-wrapper">
    <!-- partial:../../partials/_sidebar.html -->
    <nav class="sidebar sidebar-offcanvas" id="sidebar">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="dashboard.php">
            <i class="mdi mdi-grid-large menu-icon"></i>
            <span class="menu-title">应用表格</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="add-page.php">
            <i class="mdi mdi-grid-large menu-icon"></i>
            <span class="menu-title">添加应用</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="delete-page.php">
            <i class="mdi mdi-grid-large menu-icon"></i>
            <span class="menu-title">删除应用</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="update-page.php">
            <i class="mdi mdi-grid-large menu-icon"></i>
            <span class="menu-title">修改应用</span>
          </a>
        </li>
          <li class="nav-item">
              <a class="nav-link" data-bs-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
                  <i class="menu-icon mdi mdi-account-circle-outline"></i>
                  <span class="menu-title">User Pages</span>
                  <i class="menu-arrow"></i>
              </a>
              <div class="collapse" id="auth">
                  <ul class="nav flex-column sub-menu">
                      <li class="nav-item"> <a class="nav-link" href="myprofile-page.php"> 我的资料 </a></li>
                      <li class="nav-item"> <a class="nav-link" href="../logout.php"> 注销 </a></li>
                  </ul>
              </div>
          </li>
      </ul>
    </nav>
    <!-- partial -->
    <div class="main-panel">
      <div class="content-wrapper">
          <div class="row">
              <div class="col-md-6 grid-margin stretch-card">
                  <div class="card">
                      <div class="card-body">
                          <h4 class="card-title">添加应用</h4>
                          <p class="card-description"> 填写应用信息来添加应用 </p>
                          <form class="forms-sample" action="../add.php" method="post" enctype="multipart/form-data">

                              <div class="form-group">
                                  <label for="name">应用名称</label>
                                  <input type="text" class="form-control" name="name" id="name">
                              </div>
                              <div class="form-group">
                                  <label for="type">应用类型</label>
                                  <select class="form-select" name="type" id="type">
                                      <option>AI绘画</option>
                                      <option>AI视频</option>
                                      <option>AI大模型</option>
                                  </select>
                              </div>
                              <div class="form-group">
                                  <label for="info">应用简介</label>
                                  <textarea class="form-control" name="info" id="info" rows="2"></textarea>
                              </div>
                              <div class="form-group">
                                  <label for="details">应用信息</label>
                                  <textarea class="form-control" name="details" id="details" rows="4"></textarea>
                              </div>
                              <div class="form-group">
                                  <label for="url">URL</label>
                                  <textarea class="form-control" name="url" id="url" rows="2"></textarea>
                              </div>
                              <div class="form-group">
                                  <label for="details">应用logo</label>
                                  <input type="file" class="form-control" name="logo" id="logo" accept="image/*" onchange="previewLogo()" required>
                                  <img id="logoPreview" src="#" alt="Logo Preview" style="display:none; max-width: 200px; margin-top: 10px;">
                              </div>
                              <div class="button-container">
                                  <button type="submit" class="btn btn-primary me-2">提交</button>
                                  <button type="reset" class="btn btn-light">重置</button>
                              </div>
                          </form>
                      </div>
                  </div>
              </div>
              <div class="col-lg-6 grid-margin stretch-card">
                  <div class="card">
                      <div class="card-body">
                          <h4 class="card-title">应用列表</h4>
                          <!--                                <p class="card-description"> Add class <code>.table</code></p>-->
                          <div class="table-responsive">
                              <table class="table">
                                  <thead>
                                  <tr>
                                      <th>应用logo</th>
                                      <th>应用名称</th>
                                      <th>APPID</th>
                                      <th>应用类型</th>
                                      <th>应用简介</th>
                                  </tr>
                                  </thead>
                                  <tbody>
                                  <?php include '../selectApp.php'; ?>
                                  <?php if (!empty($apps)): ?>
                                      <?php foreach ($apps as $app): ?>
                                          <tr>
                                              <td>
                                                  <img src="<?php echo htmlspecialchars($app['logo']); ?>" alt="Logo" width="50">
                                              </td>
                                              <td><?php echo htmlspecialchars($app['appname']); ?></td>
                                              <td><?php echo htmlspecialchars($app['appid']); ?></td>
                                              <td><?php echo htmlspecialchars($app['type']); ?></td>
                                              <td><?php echo htmlspecialchars($app['info']); ?></td>
                                          </tr>
                                      <?php endforeach; ?>
                                  <?php else: ?>
                                      <tr><td colspan="4">没有找到应用数据。</td></tr>
                                  <?php endif; ?>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!-- content-wrapper ends -->
      <!-- partial:../../partials/_footer.html -->
      <footer class="footer">
        <div class="d-sm-flex justify-content-center justify-content-sm-between">
            <span class="text-muted text-center text-sm-left d-block d-sm-inline-block"></span>
          <span class="float-none float-sm-end d-block mt-1 mt-sm-0 text-center">Copyright © 2023. All rights reserved.</span>
        </div>
      </footer>
      <!-- partial -->
    </div>
    <!-- main-panel ends -->
  </div>
  <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../assets/vendors/js/vendor.bundle.base.js"></script>
<script src="../assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../assets/js/off-canvas.js"></script>
<script src="../assets/js/template.js"></script>
<script src="../assets/js/settings.js"></script>
<script src="../assets/js/hoverable-collapse.js"></script>
<script src="../assets/js/todolist.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script>
    // 预览上传的logo图片
    function previewLogo() {
        var file = document.getElementById('logo').files[0];
        var reader = new FileReader();

        reader.onload = function(e) {
            var logoPreview = document.getElementById('logoPreview');
            logoPreview.src = e.target.result;
            logoPreview.style.display = 'block';  // 显示预览图
        };

        if (file) {
            reader.readAsDataURL(file);  // 读取图片文件
        }
    }
</script>
<!-- End custom js for this page-->
</body>
</html>